<template>
	<div class="bigbox font">
		<!-- 头部 -->
		<div class="header flex fix">
			<img class="header_img"
				src="https://imagev2.xmcdn.com/storages/3777-audiofreehighqps/49/07/GMCoOSMH3Kb7AAAPQgH_va2X.png" alt="">
			<van-button round type="danger" class="header_btn">打开APP</van-button>
		</div>
		<!-- 搜索框 -->
		<div class="search bx fix">
			<van-search shape="round" background="#fff" :disabled="true" placeholder="请输入搜索关键词"
				@click.prevent="$router.push({
          path:'/search',
        })" @click="toSearch" />
		</div>
		<!-- 轮播图 -->
		<div class="swp">
			<w-swiper :list="swiperList"></w-swiper>
		</div>
		<!-- 导航：排行榜、分类、听单 -->
		<div class="nav flex">
			<div class="nav_item flex" v-for="item in categoryList" :key="item.order" @click="toRouteHandler(item)">
				<img style="width: 34px;height: 34px;" v-lazy="item.img" />
				<div class="nav_font">{{ item.name }}</div>
			</div>
		</div>
		<!-- 分割图片 -->
		<van-image height="82" class="hr_img"
			src="//imagev2.xmcdn.com/group61/M0A/CD/B2/wKgMZl0W1legiUgkAACPrBBFcJ4381.png" />
		<!-- 新人必听 -->
		<div class="required">
			<div class="title">新人必听</div>
			<div class="required_list">
				<!-- 每一项 -->
				<div class="required_item" v-for="item in hotList" :key="item.albumId"
					@click="toAlbumHandler(item.albumId)">
					<div class="required_top">
						<img style="width: 103px;height: 103px;"
							v-lazy="BASE_URL + (item.albumCoverPath[1] === '/' ? item.albumCoverPath.slice(1) : item.albumCoverPath)"
							alt="" />
						<div class="required_icon">
							<span class="iconfont icon-bofang opc"></span>
							<span style="color: #fff;">{{ filterNum(item.albumPlayCount) }}</span>
						</div>
					</div>
					<div class="moreV required_item_txt">
						{{ item.albumTitle }}
					</div>
				</div>
			</div>
		</div>
		<!-- 限时免费 -->
		<ul class="free big_font flex">
			<li class="free_left">限时免费</li>
			<!-- 倒计时 -->
			<li>
				<van-count-down :time="timeRemaining">
					<template #default="timeData">
						<strong class="block">{{ (timeData.hours + '').padStart(2, "0") }}</strong>
						<strong>:</strong>
						<strong class="block">{{ (timeData.minutes + '').padStart(2, "0") }}</strong>
						<strong>:</strong>
						<strong class="block">{{ (timeData.seconds + '').padStart(2, "0") }}</strong>
					</template>
				</van-count-down>
			</li>
		</ul>
		<!-- 限时免费的轮播图 -->
		<div class="free_outer">
			<swiper :slidesPerView="3" :freeMode="true" :modules="modules" :spaceBetween="10" class="mySwiper">
				<swiper-slide v-for="item in freeList" :key="item.id">
					<div class="free_item" @click="toAlbumHandler(item.id)">
						<div style="position: relative;">
							<img style="width: 112px;height: 104px;" v-lazy="item.coverPath" alt="" />
							<div class="required_icon" style="position: absolute;left: 8px;">
								<span class="iconfont icon-bofang opc"></span>
								<span style="color: #fff;">{{ filterNum(item.playCount) }}</span>
							</div>
						</div>
						<div class="free_btm">
							<div class="moreV" style="line-height: 1.5;">
								{{ item.title }}
							</div>
						</div>
					</div>
				</swiper-slide>
			</swiper>
		</div>
		<!-- 今日热点 -->
		<div class="list_content bx">
			<div class="title big_font">{{ "今日热点" }}</div>
			<div class="list flex">
				<!-- 每一项 -->
				<w-card :list="todayHotList"></w-card>
			</div>
		</div>

		<!-- 博客推荐 -->
		<div class="list_content bx">
			<div class="title big_font">{{ "博客推荐" }}</div>
			<div class="list flex">
				<!-- 每一项 -->
				<w-card :list="blogsList"></w-card>
			</div>
		</div>

		<!-- 底部 -->
		<w-footer></w-footer>
	</div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { FreeMode } from 'swiper/modules';
import WSwiper from "@/components/w-swiper/index.vue";
import WCard from "@/components/w-card/index.vue";
import WFooter from "@/components/w-footer/index.vue";
import homeRequest from "@/api/home";//引入首页的派生类
import { ref } from 'vue';
import { onMounted } from 'vue';
import { Tomatoes, Tomatoe, ALBUMS, FREE_LIST, HOME_TODAY_HOT_LIST } from "@/type/resType/homeResType";
import reminder from '@/utils/reminder';
import filterNum from "@/tools/filterNum";
import { useRouter } from "vue-router";

const router = useRouter();
const BASE_URL = import.meta.env.VITE_IMG_BASE_URL;
const modules = [FreeMode];
const swiperList = ref<any[]>([]);//轮播图数据
const categoryList = ref<Tomatoes>([]);//分类数据
const hotList = ref<ALBUMS>([]);//保存新人必听列表数据
const freeList = ref<FREE_LIST>([]);// 保存限时免费列表的数据
const todayHotList = ref<HOME_TODAY_HOT_LIST>([]);//保存今日热点列表的数据
const timeRemaining = ref<number>(0);//保存请求回来的剩余时间
const blogsList = ref<ALBUMS>([]);//保存博客列表数据

// 获取首页轮播图
async function forGetHomeSwiperList() {
	try {
		let { data: { moduleContent: { moduleRankDatas, pictures, tomatoes } } } = await homeRequest.getHomeData();
		console.log("home路由页面暂时没用上的数据：", moduleRankDatas);
		swiperList.value = pictures;
		categoryList.value = tomatoes;
	} catch (error: any) {
		reminder(error.message || "网络连接异常")
	}
}
// 获取新人必听列表数据
async function forGetHotList() {
	try {
		let {data: { albums } } = await homeRequest.getHotList();
		hotList.value = albums.slice(0, 6);
		blogsList.value = albums.slice(6);
    
	} catch (error: any) {
		reminder(error.message || "网络连接异常");//提示用户
	}
}
// 获取限时免费列表和今日热点列表
async function forGetFreeListAndTodayList() {
	try {
		let { data: { hotTrack: { hotTracks: hotList }, limitedFreeAlbum: { limitedTimeFreeAlbums, remainingTime } } } = await homeRequest.getFreeAndTodayInfo();
		freeList.value = limitedTimeFreeAlbums;
		todayHotList.value = hotList;
		timeRemaining.value = remainingTime;
    
	} catch (error: any) {
		reminder(error.message || "网络连接异常")
	}
}

onMounted(() => {
	[forGetHomeSwiperList, forGetHotList, forGetFreeListAndTodayList].forEach(item => item());
})

// 点击`排行榜、分类、听单`的处理函数
const toRouteHandler = (item: Tomatoe) => {
	console.log(item);
	if (item.order === 1) {
		router.push("/rank");
	} else if (item.order === 2) {
		router.push("/category")
	} else {
		router.push("/listen-list")
	}
}

// 点击`新人必听`和`限时免费`的处理函数：跳转到专辑页
const toAlbumHandler = (albumId: number) => {
	router.push({
		name: "Album",
		path: "/album",
		params: {
			albumId
		}
	})
}

// 跳转搜索,保存数据到本地
const toSearch = ()=>{
  localStorage.setItem('HometoSearch',JSON.stringify([hotList,freeList]))
}
</script>

<script lang="ts">
export default {
	name: "Home",
};
</script>

<style scoped lang="less">
.font {
	font-size: 12px;
}

.big_font {
	font-size: 18px;
	font-weight: bold;
	color: #333;
}

.flex {
	display: flex;
}

.bx {
	box-sizing: border-box;
}

.fix {
	position: fixed;
	z-index: 999;
}

// 多行文本移出隐藏
.moreV {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	/*设置对齐模式*/
	-webkit-line-clamp: 2;
	/*设置多行的行数，示例为2行*/
}

// 播放的小图标的样式
.opc {
	opacity: .8;
	background-color: #fff;
	border-radius: 50%;
	margin-right: 5px;
}

// 小图标的定位
.required_icon {
	position: absolute;
	bottom: 2px;
}

// 最外侧的容器
.bigbox {
	width: 100%;
	height: 100%;
	overflow: hidden;

	.header {
		height: 50px;
		padding: 15px 15px 5px;
		box-sizing: border-box;
		justify-content: space-between;
		background-color: #fff;
		top: 0px;
		left: 0px;
		right: 0px;

		.header_img {
			width: 116px;
			height: 29px;
		}

		.header_btn {
			width: 88px;
			height: 30px;
			background: #fa2800;
		}
	}

	// 搜索
	.search {
		width: 100%;
		height: 46px;
		padding-top: 8px;
		top: 45px;
		left: 0;
		right: 0;
		background-color: #fff;

		:deep(.van-search) {
			width: 100%;
			height: 30px;
		}

	}

	.swp {
		margin-top: 100px;
	}

	// 导航
	.nav {
		height: 53.8px;
		margin-top: 20px;
		justify-content: center;
		margin-bottom: 20px;

		.nav_item {
			width: 30%;
			height: 100%;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.nav_font {
				margin-top: 5px;
			}
		}
	}

	// 分割的图片
	.hr_img {
		width: 100%;
	}

	// 新人必听
	.required {
		padding: 15px 15px 0px 15px;
		color: #40404c;

		.title {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 17px;
		}

		.required_top {
			position: relative;
		}

		.required_list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.required_item {
				width: 103px;

				.required_item_txt {
					margin: 6px 0px 11px;
					line-height: 1.5;
				}

			}
		}

	}

	// 限时免费
	.free {
		height: 25.8px;
		margin: 17px 0px 10px 15px;
		width: 100%;
		align-items: center;
		line-height: 1.2;

		.free_left {
			margin-right: 10px;
		}

		.block {
			background-color: red;
			color: #fff;
			font-size: 18px;
		}
	}

	// 限时免费的轮播图
	.free_outer {
		position: relative;
		width: 100%;

		.free_btm {
			width: 112px;
		}

		:deep(.van-image__img) {
			border-radius: 5px !important;
		}

		// 首页横向轮播图
		.swiper {
			width: 100%;
			height: 100%;
		}

		.swiper-wrapper:last-child {
			margin-right: 0px;
		}

		.swiper-slide {
			text-align: center;
			font-size: 12px;
			background: #fff;
			/* Center slide text vertically */
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.swiper-slide img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	// 列表主体内容区域
	.list_content {
		width: 100%;
		height: 100%;
		padding: 15px 15px 0px 15px;

		.title {
			margin-bottom: 20px;
		}

		.list {
			flex-direction: column;
			height: 100%;


		}
	}
}
</style>